import React, { Component } from 'react'

/* 
受控组件:表单的属性和状态进行绑定，当表单onchange的时候获取到输入的值，修改状态


*/

export default class Shoukong extends Component {

    state = {
        username: '',//用户名
        userxy: false,//是否同意协议
        userhobby: [
            { id: 1, title: '台球', sed: false },
            { id: 2, title: '乒乓球', sed: true },
            { id: 3, title: '篮球', sed: false },
        ]
    }

    //切换
    changeSed = (id) => {
        //不允许直接修改原数组
        let newlist = [...this.state.userhobby]
        newlist.forEach(item => {
            if (item.id == id) {
                item.sed = !item.sed
            }
        })
        this.setState({ userhobby: newlist })
    }

    //类组件的计算属性
    //this.xxx 自定义 成员 属性 + get 取值函数/set赋值函数 ==计算属性
    get all() {
        return this.state.userhobby.every(item => {
            return item.sed
        })
    }
    //将所有的sed=布尔
    changeAllSed = (c) => {
        let newlist = [...this.state.userhobby]
        newlist.forEach(item => {
            item.sed = c
        })
        this.setState({ userhobby: newlist })
    }

    //计算数量
    get total(){
        return this.state.userhobby.reduce((p,n)=>{
            if(n.sed){
                return p+1
            }
            return p
        },0)
    }

    render() {

        let { username, userxy, userhobby } = this.state

        return (
            <div>

                <div>
                    <label htmlFor="">用户名</label>
                    <input value={username} onChange={(e) => {
                        this.setState({ username: e.target.value })
                    }} />
                </div>

                <div>
                    <label htmlFor="">是否同意协议</label>
                    <input type='checkbox' checked={userxy} onChange={(e) => {
                        this.setState({ userxy: e.target.checked })
                    }} />
                </div>

                <button disabled={!userxy} onClick={() => {
                    console.log(this.state);

                }}>提交</button>

                <div>
                    <label htmlFor="">爱好</label>
                    <div>
                        {
                            userhobby.map((item, index) => {
                                return <React.Fragment key={item.title}>
                                    <input type='checkbox' checked={item.sed} onChange={() => {
                                        this.changeSed(item.id)
                                    }} />
                                    <span>{item.title}</span>
                                </React.Fragment>
                            })
                        }
                    </div>
                </div>
                <div>
                    <input type='checkbox' checked={this.all} onChange={(e) => {
                        //将所有的sed=布尔
                        this.changeAllSed(e.target.checked)
                    }} />全选
                    <div>数量:{this.total}</div>
                </div>

            </div>
        )
    }
}
